﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0" />
		<title>文成智慧市场首页</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/idangerous.swiper2.7.6.css" />
		<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.3dflow.css" />-->
	</head>

	<body>
		<div class="container">
			<header>
				<div class="index_header">
					<p>文成市场监督平台</p>
				</div>
			</header>
			<main>
				<div class="slide_box">
					<div id="slide" class="slide" class="index-slide" alt="star">
						<!-- 轮播图片数量可自行增减 -->
						<div class="img"><img src="image/bg1.png" /></div>
						<div class="img"><img src="image/bg1.png" /></div>
						<div class="img"><img src="image/bg1.png" /></div>

						<div class="slide-bt"></div>
					</div>
				</div>
				<div class="con clearfix">

					<div class="img_list" style="">
						<ul>
							<li>
								<a target="_blank" href="/page/law.html">
									<img src="image/1.png">
									<p>法律法规</p>
								</a>
							</li>
							<li>
								<a target="_blank" href="/page/information.html">
									<img src="image/2.png">
									<p>信息服务</p>
								</a>
							</li>

							<li>
								<a target="_blank" href="/page/enterprise.html">
									<img src="image/3.png">
									<p>企业查询</p>
								</a>
							</li>
							<li>
								<a target="_blank" href="/page/equipment.html">
									<img src="image/4.png">
									<p>特种设备</p>
								</a>
							</li>
							<!--
							<li>
								<a target="_blank" href="#">
									<img src="image/5.png">
									<p>信息点评</p>
								</a>
							</li>
							<li>
								<a target="_blank" href="#">
									<img src="image/6.png">
									<p>企业排行</p>
								</a>
							</li>-->
							<li>
								<a target="_blank" href="/page/Map.html">
									<img src="image/7.png">
									<p>资讯建议</p>
								</a>
							</li>

						</ul>
					</div>

				</div>

			</main>

	</body>

</html>

<script src="js/jquery-1.10.2.min.js"></script>
<!--<script src="js/idangerous.swiper2.7.6.min.js"></script>
<script src="js/idangerous.swiper.3dflow.js"></script>-->
<script>
	var autoLb = false; //autoLb=true为开启自动轮播
	var autoLbtime = 1; //autoLbtime为轮播间隔时间（单位秒）
	var touch = true; //touch=true为开启触摸滑动
	var slideBt = true; //slideBt=true为开启滚动按钮
	var slideNub; //轮播图片数量

	//窗口大小改变时改变轮播图宽高
	$(window).resize(function() {
		$(".slide").height($(".slide").width() * 0.56);
	});

	$(function() {
		$(".slide").height($(".slide").width() * 0.56);
		slideNub = $(".slide .img").size(); //获取轮播图片数量
		for(i = 0; i < slideNub; i++) {
			$(".slide .img:eq(" + i + ")").attr("data-slide-imgId", i);
		}

		//根据轮播图片数量设定图片位置对应的class
		if(slideNub == 1) {
			for(i = 0; i < slideNub; i++) {
				$(".slide .img:eq(" + i + ")").addClass("img3");
			}
		}
		if(slideNub == 2) {
			for(i = 0; i < slideNub; i++) {
				$(".slide .img:eq(" + i + ")").addClass("img" + (i + 3));
			}
		}
		if(slideNub == 3) {
			for(i = 0; i < slideNub; i++) {
				$(".slide .img:eq(" + i + ")").addClass("img" + (i + 2));
			}
		}
		if(slideNub > 3 && slideNub < 6) {
			for(i = 0; i < slideNub; i++) {
				$(".slide .img:eq(" + i + ")").addClass("img" + (i + 1));
			}
		}
		if(slideNub >= 6) {
			for(i = 0; i < slideNub; i++) {
				if(i < 5) {
					$(".slide .img:eq(" + i + ")").addClass("img" + (i + 1));
				} else {
					$(".slide .img:eq(" + i + ")").addClass("img5");
				}
			}
		}

		//根据轮播图片数量设定轮播图按钮数量
		if(slideBt) {
			for(i = 1; i <= slideNub; i++) {
				$(".slide-bt").append("<span data-slide-bt='" + i + "' onclick='tz(" + i + ")'></span>");
			}
			$(".slide-bt").width(slideNub * 34);
			$(".slide-bt").css("margin-left", "-" + slideNub * 17 + "px");
		}

		//自动轮播
		if(autoLb) {
			setInterval(function() {
				right();
			}, autoLbtime * 1000);
		}

		if(touch) {
			k_touch();
		}
		slideLi();
		imgClickFy();
	})

	//右滑动
	function right() {
		var fy = new Array();
		for(i = 0; i < slideNub; i++) {
			fy[i] = $(".slide .img[data-slide-imgId=" + i + "]").attr("class");
		}
		for(i = 0; i < slideNub; i++) {
			if(i == 0) {
				$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[slideNub - 1]);
			} else {
				$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[i - 1]);
			}
		}
		imgClickFy();
		slideLi();
	}

	//左滑动
	function left() {
		var fy = new Array();
		for(i = 0; i < slideNub; i++) {
			fy[i] = $(".slide .img[data-slide-imgId=" + i + "]").attr("class");
		}
		for(i = 0; i < slideNub; i++) {
			if(i == (slideNub - 1)) {
				$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[0]);
			} else {
				$(".slide .img[data-slide-imgId=" + i + "]").attr("class", fy[i + 1]);
			}
		}
		imgClickFy();
		slideLi();
	}

	//轮播图片左右图片点击翻页
	function imgClickFy() {
		$(".slide .img").removeAttr("onclick");
		$(".slide .img2").attr("onclick", "left()");
		$(".slide .img4").attr("onclick", "right()");
	}

	//修改当前最中间图片对应按钮选中状态
	function slideLi() {
		var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
		$(".slide-bt span").removeClass("on");
		$(".slide-bt span[data-slide-bt=" + slideList + "]").addClass("on");
	}

	//轮播按钮点击翻页
	function tz(id) {
		var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
		if(tzcs > 0) {
			for(i = 0; i < tzcs; i++) {
				setTimeout(function() {
					right();
				}, 1);
			}
		}
		if(tzcs < 0) {
			tzcs = (-tzcs);
			for(i = 0; i < tzcs; i++) {
				setTimeout(function() {
					left();
				}, 1);
			}
		}
		slideLi();
	}

	//触摸滑动模块
	function k_touch() {
		var _start = 0,
			_end = 0,
			_content = document.getElementById("slide");
		_content.addEventListener("touchstart", touchStart, false);
		_content.addEventListener("touchmove", touchMove, false);
		_content.addEventListener("touchend", touchEnd, false);

		function touchStart(event) {
			var touch = event.targetTouches[0];
			_start = touch.pageX;
		}

		function touchMove(event) {
			var touch = event.targetTouches[0];
			_end = (_start - touch.pageX);
		}

		function touchEnd(event) {
			if(_end < -100) {
				left();
				_end = 0;
			} else if(_end > 100) {
				right();
				_end = 0;
			}
		}
	}
</script>